<script  setup>
import request from "../utils/request.js";
import { useUserStore } from "../stores/user.js";
import { ElMessage } from "element-plus";
import router from "../router/index.js";
import axios from "axios";

import { ref, reactive, defineComponent, computed } from "vue";
import { Plus } from "@element-plus/icons-vue";

const userId = ref();
userId.value = useUserStore().getUser.id;
const inforData = reactive({
  informationData: {},
});

const showInformation = () => {
  request.get("/infor/selectInformationById/" + userId.value).then((res) => {
    inforData.informationData = res.data;

    if (res.data.sex === "男") {
      sexNum.value = 1;
    } else {
      sexNum.value = 0;
    }
    if (res.data.birth !== null) {
      console.log(res.data.birth);
      birthStr.value = res.data.birth;
    }
    if(res.data.photo!==null){
      imageUrl.value = res.data.photo
    }
  });
};
showInformation();

// 标记性别
const sexNum = ref(0);
// 标记出生日期
const birthStr = ref("");

const updateInfor = () => {
  // 转化成日期格式，再调用toLocaleDateString函数（把date对象的日期部分转换成字符串，后台用Date类型接受即可）
  const birth = new Date(Date.parse(birthStr.value)).toLocaleDateString();

  request
    .get("/infor/updateInfor", {
      params: {
        name: inforData.informationData.name,
        sexNum: sexNum.value,
        birth: birth,
        id: inforData.informationData.id,
      },
    })
    .then((res) => {
      if (res.code === "200") {
        showInformation()
        ElMessage.success(res.msg);
      }
    });
};

// 充值页面
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const czmoney = ref();

const showRecharge = () => {
  dialogFormVisible.value = true;
};
const recharge = () => {
  request
    .get(
      "/infor/recharge/" +
        czmoney.value +
        "/" +
        inforData.informationData.id +
        "/" +
        inforData.informationData.uid
    )
    .then((res) => {
      if (res.code === "200") {
        ElMessage.success(res.msg);
        showInformation();
        czmoney.value = null;
      }
    });
};

const goback = () => {
  router.go(-1);
};

const showSpendList = () => {
  router.push("/home1/spendlist");
};

const imageUrl = ref(""); //图片回显值
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    //只能为图片类型
    // imageUrl=rawFile
    ElMessage.error("请选择图片类型的文件！");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("大小不能超过2MB!"); //不能大于2MB
    return false;
  }
  return true;
};

const updatePhoto =() =>{
  request.get("/infor/updatePhoto/" + userId.value).then((res)=>{
    if(res.code === "200"){
      showInformation()
      ElMessage.success(res.msg)
    }
  })
}

// post方式文件上传到后端,后端用MultipartFile类型接受file，
// 上传完成后调用updatePhoto方法更新图片，更新完成后在调用showInformation进行刷新展示
const upload = (param) => {
  const file = new FormData();
  file.append("file", param.file);
  axios.post("http://localhost:10010/infor/uploadImg", file).then((res) => {
    updatePhoto()
  });
};

</script>

<template>
  <div class="infor">
    <span style="font-size: 20px; font-weight: bold">个人资料修改</span>
    <!-- 上传头像，通过http-request绑定上传方法upload -->
    <div class="touxiang">
      <el-upload
        class="avatar-uploader"
        :http-request="upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :limit="1"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 180px; height: 180px"/>
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <!-- 用户名 -->
    <div class="name">
      <span style="flex: 1; font-size: 15px; padding-top: 2px">用户名：</span>
      <!-- <el-input
        v-model="inforData.informationData.name"
        placeholder="Please input"
        style="width: 180px"
        disabled
      /> -->
      {{ inforData.informationData.name }}
    </div>
    <!-- 性别 -->
    <div class="sex">
      <el-radio-group v-model="sexNum">
        <el-radio :label="0">女</el-radio>
        <el-radio :label="1">男</el-radio>
      </el-radio-group>
    </div>
    <!-- 出生日期 -->
    <div class="birth">
      <span style="width: 50px; margin-top: 7px; flex: 1">生日：</span>
      <el-date-picker
        v-model="birthStr"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
    </div>
    <!-- 余额  -->
    <div class="balance">
      <span>余额：{{ inforData.informationData.balance }}</span>
      <button style="margin-left: 20px" @click="showRecharge()">充值</button>
    </div>
    <!-- 消费购买记录 -->
    <div class="record">
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        @click="showSpendList()"
        >消费记录</el-button
      >
      <div style="margin-bottom: 15px;">
        <span style="margin-bottom: 10px;color:green">
          积分：{{ inforData.informationData.points }}
          </span>
      </div>
    </div>
    <!-- 操作 -->
    <div class="inforOption">
      <el-button type="primary" @click="updateInfor()">提交</el-button>
      <el-button type="info" @click="goback()">返回</el-button>
    </div>

    <!-- 充值页面 -->
    <el-dialog v-model="dialogFormVisible" title="Shipping address">
      <el-form>
        <el-form-item label="充值金额" :label-width="formLabelWidth">
          <el-input v-model="czmoney" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="r_dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="recharge()"> 充值 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.infor {
  padding: 20px;
}

.touxiang {
  width: 180px;
  height: 180px;
  background-color: rebeccapurple;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.name {
  display: flex;
  width: 100px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.sex {
  box-sizing: border-box;
  width: 110px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  /* background-color: rebeccapurple; */
}

.birth {
  width: 280px;
  height: 60px;
  display: flex;
  /* background-color: aqua; */
  margin-left: auto;
  margin-right: auto;
}

.balance {
  width: 150px;
  height: 45px;
  /* background-color: gold; */
  margin-left: auto;
  margin-right: auto;
}

.record {
  width: 70px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.inforOption {
  width: 600px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
}
</style>
